<template>
  <div>
    <!-- /.u-menu -->
    <div class="u-main" >
      <div class="u-tab-wrap">
        <ul class="u-tab">
          <li :class="{current:(model==1)}"><a href="javascript:void(0)" @click="changeModel(1)">申请提现</a></li>
          <li :class="{current:(model==2)}"><a href="javascript:void(0)" @click="changeModelll(2)">提现记录</a></li>
        </ul>
      </div>
      <div id="tab_box" style="height: 600px">
        <div class="u-form-wrap" v-show="model==1">
          <!--style="display: none;"-->
          <div id="drawcash_apply_box" class="u-form-wrap">
            <div class="uf-tips" style="margin-top: -30px">
              <p style="color: red;">
                提现说明：<br />
                &nbsp;&nbsp;&nbsp;&nbsp; 1、在正常工作日（00:00—22:00）操作的 提现，均为次日12—17点之间到账（周五及周末操作的提现，均在下周一到账）；<br />
                &nbsp;&nbsp;&nbsp;&nbsp; 2、充值未投标客户，充值24小时后即可进行 提现操作，完成操作后需收取未投标提现金额的1%为服务费。<br />
              </p>
            </div>
            <div>
              <div id="drawcash_apply_div" class="m-form-box mt20 newbg noborderleft" style="overflow: visible;height: 650px">
                <div class="m-form-til"><strong>请输入提现信息</strong></div>
                <div class="i-item i-long-item nobordertop"><label class="i-til">账户可用余额：</label>
                  <div class="i-right"><div class="i-txt"><i id="user_money_now">{{amount}}</i>元</div></div>
                </div>
                <!-- /.i-item -->
                <div class="i-item i-long-item"><label class="i-til">可提现金额：</label>
                  <div class="i-right">
                    <div class="i-txt"><i id="user_okdraw">{{amount-100}}</i>元 <span class="red" style="font-size: 12px;">(需收取服务费部分：<i
                      id="user_feedraw">{{amount-1000000}}</i>元，无需收取服务费部分：1000000元。)</span>
                    </div>
                  </div>
                </div>
                <!-- /.i-item -->
                <div class="i-item i-long-item">
                    <label class="i-til">
                      <span class="red">*</span>提&nbsp;现&nbsp;方&nbsp;式：</label><div class="i-right">
                    <div class="i-txt">
                      <span class="applymethod">
                        <input name="method" type="radio" value="1" checked="checked" @click="showzhifubao" v-model="zhifubaoflag"/>支付宝提现
                      </span>
                      <span class="applymethod">
                        <input name="method" type="radio" value="1" checked="checked" @click="showyinghangka" v-model="yinhanfkaflag"/>银行卡提现
                      </span>
                      <el-select v-model="value" placeholder="请选择" v-show="yinhanfkaflag">
                        <el-option
                          v-for="item in bankList"
                          :key="item.bankCard"
                          :label="item.bankName"
                          :value="item.bankCard">
                          <span style="float: left">{{ item.bankName }}</span>
                          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.bankCard }}</span>
                        </el-option>
                      </el-select><br />
                    </div>
                  </div>
                </div>
                <div class="i-item i-long-item noborder">
                  <label class="i-til"><span class="red">*</span>提&nbsp;现&nbsp;金&nbsp;额：</label>
                  <div class="i-right">
                    <input id="drawcash_money" v-model="drawMoney" name="money" type="text" class="i-inp" style="width: 90px;" />元
                  </div>
                </div>
                <div class="i-item i-long-item noborder" >
                  <label class="i-til" style="margin-left: -158px"><span class="red">*</span>支&nbsp;付&nbsp;密&nbsp;码：</label>
                  <div>
                    <input id="drawcash_paypwd" v-model="paypwd" name="paypwd" type="password" class="i-inp" value="" style="width: 90px;margin-left: 9px"/>
                  </div>
                </div>
                <br><br>
                <!-- /.i-item -->
                  <div class="i-item-btn" style="margin-left: -150px"><button type="submit" id="drawcash_apply_submit" @click="drawnow" class="i-btn-txt1">申请提现</button></div>
                </div>
              <!-- /.m-form-box -->
            </div>
          </div>
        </div>
        <div class="u-form-wrap" v-show="model==2" style="display: none;">
          <div id="drawcash_record_box" class="u-form-wrap">
            <div class="m-sub-til" style="padding: 0;">提现记录</div>
            <div class="search-box" style="margin-bottom: 15px;">
              <table class="u-table">
                <tbody>
                <tr>
                  <td colspan="3">
                    <div class="tab-search" style="padding-top: 5px;">
                      <el-select v-model="value1" placeholder="请选择">
                        <el-option
                          v-for="item in status"
                          :key="item.value1"
                          :label="item.label"
                          :value="item.value1">
                          <span style="float: left">{{ item.label }}</span>
                          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value1 }}</span>
                        </el-option>
                      </el-select>
                      <span class="demonstration">默认</span>
                      <el-date-picker
                        v-model="value2"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                      </el-date-picker>
                      <div class="i-item-btn"><button id="do_search" class="i-btn-txt3" @click="selectdraw(1)">查询</button></div>
                    </div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
            <!--<el-table
              :data="tableData"
              stripe
              style="width: 100%">
              <el-table-column
                prop="date"
                label="时间"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="金额"
                width="180">
              </el-table-column>
              <el-table-column
                prop="address"
                label="卡号">
              </el-table-column>
              <el-table-column
                prop="address"
                label="银行">
              </el-table-column>
              <el-table-column
                prop="address"
                label="状态">
              </el-table-column>
              <el-table-column
                prop="address"
                label="说明">
              </el-table-column>
              <el-table-column
                prop="address"
                label="备注">
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
                </template>
              </el-table-column>
            </el-table>-->
            <table class="u-table">
              <tr>
                <th width="10%">序号</th>
                <th width="12%">时间</th>
                <th width="12%">金额</th>
                <th width="12%">卡号</th>
                <th width="10%">银行</th>
                <th width="12%">状态</th>
                <th width="12%">说明</th>
                <th width="10%">备注</th>
                <th width="10%">操作</th>
              </tr>
              <tr v-for="(draw,i) in draws">
                <td>{{i+1}}</td>
                <td>{{$moment(draw.drawDate).format('YYYY-MM-DD')}}</td>
                <td>{{draw.drawMoney}}</td>
                <td>{{draw.drawCard}}</td>
                <td>{{draw.drawBank}}</td>
                <td>{{draw.drawStatus}}</td>
                <td>{{draw.drawContext}}</td>
                <td>{{draw.drawRemark}}</td>
                <td style="color: green;" @click="deletedraw(draw.drawId)">删除</td>
              </tr>
            </table>
            <!--分页-->
            <div style="margin-top: -30px;margin-bottom: -50px">
              <p class="notic_pagelink">
                <span v-for="i in pageInfo.pages">
                  <a href="javascript:;" @click="selectdraw(i)" :class="{notic_acur:(activeNum==i)}">{{i}}</a>
                </span>
              </p>
            </div>
          </div>
        </div>
        <div class="u-form-wrap"  v-show="model==3" style="display: none;">
          <div id="drawcash_bank_box" class="u-form-wrap">
            <div class="uf-tips">
              <p style="color: red;">
                注：银行账户填写后，如需要更改，请联系客服。</p>
            </div>
            <div>
              <div class="m-form-box mt10" style="overflow: visible;">
                <div class="m-form-til">
                  <b>银行账户信息</b></div>
                <div class="i-item i-long-item">
                  <label class="i-til">
                    开户名：</label><div class="i-txt">
                  <i id="user_realname">张三</i></div>
                </div>
                <!-- /.i-item -->
                <div class="i-item i-long-item">
                  <label class="i-til">
                    开户行：</label><div class="i-select" style="width: 130px;">
                  <input type="hidden" name="banktype" value="" /><span class="sel-til">请选择</span><ul
                  class="sel-list">
                  <li val="icbc"><a>中国工商银行</a></li><li val="ccb"><a>中国建设银行</a></li><li val="cmb"><a>招商银行</a></li><li
                  val="boc"><a>中国银行</a></li><li val="abc"><a>中国农业银行</a></li><li val="bocom"><a>交通银行</a></li><li
                  val="cmbc"><a>中国民生银行</a></li><li val="hxbc"><a>华夏银行</a></li><li val="cib"><a>兴业银行</a></li><li
                  val="spdb"><a>上海浦东发展银行</a></li><li val="gdb"><a>广东发展银行</a></li><li val="citic"><a>中信银行</a></li><li
                  val="ceb"><a>光大银行</a></li><li val="psbc"><a>中国邮政储蓄银行</a></li><li val="sdb"><a>深圳发展银行</a></li><li
                  val="other"><a>其它银行</a></li></ul>
                </div>
                </div>
                <div class="i-item i-long-item">
                  <label class="i-til">
                    支行名称：</label><input id="drawcash_bank_bank" name="bank" value="" type="text" class="i-inp" /></div>
                <div class="i-item i-long-item">
                  <label class="i-til">
                    银行卡号：</label><input id="drawcash_bank_card" name="card" value="" type="text" class="i-inp" /></div>
                <div class="i-item">
                  <p class="tips" id="drawcash_bank_msg">
                  </p>
                </div>
                <!-- /.i-item -->
                <div class="i-item-btn">
                  <button id="drawcash_bank_submit" class="i-btn-save">
                  </button>
                </div>
              </div>
              <!-- /.m-form-box -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: "",
      data(){
        return{
          model:1,
          amount:0,
          drawMoney:0,
          paypwd:'',
          msg:'',
          zhifubaoflag:false,yinhanfkaflag:false,
          bankList:[],value: '',
          status: [{
            value1: 'zhifubao',
            label: '支付宝'
          }, {
            value1: 'yinhangka',
            label: '银行卡'
          },{
            value1: 'all',
            label: '全部'
          }],
          value1: '',
          value2:'',
          draws:[],pageInfo:[],
          activeNum:1
        }
      },
      methods:{
        changeModel(i){
          this.model=i
        },
        /*删除提现记录并进行条件查询*/
        deletedraw:function(id){
          /*时间不为空*/
          if(this.value2!=''){
            this.axios.post("/api/moneyManage/draw/deletedraw",{drawcontext:this.value1,drawtime:this.value2,drawId:id}).then((data)=>{
              this.draws=data.data.list
              this.pageInfo=data.data
            })
            /*时间为空*/
          }else{
            this.axios.post("/api/moneyManage/draw/deletedraw",{drawcontext:this.value1,drawId:id}).then((data)=>{
              this.draws=data.data.list
              this.pageInfo=data.data
            })
          }
        },
        /*切换到提现记录标签并初始化表格数据*/
        changeModelll:function(i){
          this.model=i
          this.axios.post("/api/moneyManage/draw/findAll").then((data)=>{
            this.draws=data.data.list
            this.pageInfo=data.data
          })
        },
        /*条件查询提现记录*/
        selectdraw:function(start){
          this.activeNum=start
          /*时间为空*/
          if(this.value2!=''){
            this.axios.post("/api/moneyManage/draw/finddrawbycons",{drawcontext:this.value1,drawtime:this.value2,startPage:start}).then((data)=>{
              this.draws=data.data.list
              this.pageInfo=data.data
            })
            /*时间不为空*/
          }else{
            this.axios.post("/api/moneyManage/draw/finddrawbycons",{drawcontext:this.value1,startPage:start}).then((data)=>{
              this.draws=data.data.list
              this.pageInfo=data.data
            })
          }
        },
        /*提现*/
        drawnow:function () {
          /*支付宝提现*/
          if(this.zhifubaoflag){
            this.axios.post("/api/moneyManage/draw/zhifubaoDrawnow",{drawmoney:this.drawMoney,paypwd:this.paypwd}).then((data)=>{
              this.msg=data.data
              alert(this.msg)
              this.axios.post("/api/moneyManage/draw/showAmount").then((data)=>{
                this.amount=data.data
              })
            })
            /*银行卡提现*/
          }else{
            this.axios.post("/api/moneyManage/draw/cardDraw",{drawmoney:this.drawMoney,paypwd:this.paypwd,cardId:this.value}).then((data)=>{
              this.msg=data.data
              alert(this.msg)
              this.axios.post("/api/moneyManage/draw/showAmount").then((data)=>{
                this.amount=data.data
              })
            })
          }
        },
        /*切换支付方式并获取银行卡下拉列表数据*/
        showyinghangka:function () {
          this.yinhanfkaflag=true
          this.zhifubaoflag=false
          this.axios.post("/api/moneyManage/draw/getbanklist").then((data)=>{
            this.bankList=data.data
          })
        },
        /*切换支付方式*/
        showzhifubao:function () {
          this.zhifubaoflag=true
          this.yinhanfkaflag=false
        }
      },
      /*初始化获取账户余额*/
      created() {
        this.axios.post("/api/moneyManage/draw/showAmount").then((data)=>{
          this.amount=data.data
        })
      }
    }

</script>

<style scoped>
  @import  '../../assets/usercss/css/UserCSS.css';
  @import "../../assets/css/style.css";

</style>
